<template>
  <div class="ChatListcontainer">
    <div class="ChatListLeftNav">
      <div class="ChatListLeftNav-TopBar">
        <a-button type="default" @click="router.push('/dashboard')">
          <LeftOutlined style="position: absolute; right: 12px; top: 12px"
        /></a-button>
        <img
          style="position: absolute; right: 150px; top: 15px"
          src="../../assets/CourseManageView/inform.svg"
          alt="SVG Image"
        />
        <p>数据科学导论</p>
      </div>
      <div class="ChatListContent-Confirm">
        <a-button type="primary">新建会话</a-button>
      </div>
      <div class="ChatListLeftNav-Management">
        <div class="ChatListLeftNav-Management-Title">今天</div>
        <div class="ChatListLeftNav-Management-Nav">
          
          <a-list item-layout="horizontal" :data-source="today_items">
            <template #renderItem="{ item }">
              <a href="" class="list-item-link" :class="{ active: isActive(item) }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #description>
                      {{ item.content }}
                    </template>

                    <template #title>
                      {{ item.label }}
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a>
            </template>
          </a-list>

        </div>
      </div>

      <div class="ChatListLeftNav-Management">
        <div class="ChatListLeftNav-Management-Title">最近七天</div>
        <div class="ChatListLeftNav-Management-Nav">
          
          <a-list item-layout="horizontal" :data-source="sevendays_items">
            <template #renderItem="{ item }">
              <a href="" class="list-item-link" :class="{ active: isActive(item) }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #description>
                      {{ item.content }}
                    </template>

                    <template #title>
                      {{ item.label }}
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </a>
            </template>
          </a-list>

        </div>
      </div>

      <div class="ChatListLeftNav-Management">
        <div class="ChatListLeftNav-Management-Title">最近三十天</div>
          <div class="ChatListLeftNav-Management-Nav">
            
            <a-list item-layout="horizontal" :data-source="thirty_items">
              <template #renderItem="{ item }">
                <a href="" class="list-item-link" :class="{ active: isActive(item) }">
                  <a-list-item>
                    <a-list-item-meta>
                      <template #description>
                        {{ item.content }}
                      </template>

                      <template #title>
                        {{ item.label }}
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </a>
              </template>
            </a-list>

        </div>
      </div>


    </div>
    <div class="Agent-Wrap">
      <AgentChatFrameForList />
    </div>
  </div>
</template>

<script setup>
import AgentChatFrameForList from "../../components/AgentChatFrameForList.vue";
import AgentChatFrame from "../../components/AgentChatFrame.vue"

import { LeftOutlined } from "@ant-design/icons-vue";
import { h, ref, reactive } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";

import { useRouter } from 'vue-router'

const router = useRouter()

function isActive(item) {
      // 判断当前页
      return item.title == current_item.value;
    };
const current_item = ref(["today_1"]);
const today_items = ref([
  {
    key: "today_1",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "数据科学的基础概念",
    title: "today_1",
    content:"数据科学的基础概念包括哪些内容？",//define
    type: 'menu',
  },
  {
    key: "today_2",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "数据收集和清洗的重要性",
    title: "today_2",
    content:"为什么数据收集和清洗对数据科学至关重要？",//define
    type: 'menu'
  },
  {
    key: "today_3",

    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "统计学在数据科学中的作用",
    title: "today_3",
    content:"统计学在数据科学中扮演着怎样的角色？",//define
    type: 'menu'
  },
]);


const sevendays_items = ref([
  {
    key: "sevendays_1",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "数据分析与可视化",
    title: "sevendays_1",
    content:"数据分析和可视化是如何相互关联的？"//define
  },
  {
    key: "sevendays_2",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "机器学习基础入门",
    title: "sevendays_2",
    content:"机器学习的基础知识有哪些？"//define
  },
 
]);

const thirty_items = ref([
  {
    key: "thirty_1",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "数据科学中的数据倾斜问题",
    title: "thirty_1",
    content:"什么是数据倾斜？如何解决数据倾斜问题？"//define
  },
  {
    key: "thirty_2",
    
    // label: h("a", { href: "./info", target: "_self" }, "数据科学的基础概念"),
    label: "数据科学中的数据倾斜问题",
    title: "thirty_2",
    content:"什么是数据倾斜？如何解决数据倾斜问题？"//define
  },
]);


</script>

<style lang="scss" scoped>
.ChatListcontainer {
  min-width: 1366px;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #f6f8f7;
}

::-webkit-scrollbar {
  width: 5px; /* 垂直滚动条的宽度 */
  height: 10px;
  max-height: 10px;
}
.ChatListLeftNav {
  box-sizing: border-box;
  width: 236px;
  height: 100%;
  flex-shrink: 0;
  display: inline-block;
  margin-left: 12px;
  padding-top: 20px;
  justify-content: center;
  //overflow-x: scroll;
  //overflow-y: scroll;
  overflow-x: hidden;
}
.ChatListLeftNav-TopBar {
  width: 236px;
  height: 40px;

  align-content: center;
  position: relative;
}
.ChatListLeftNav-TopBar .ant-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);

  display: inline-block;
  position: absolute;
  left: 0;
  top: 4px;
}
.ChatListLeftNav-TopBar p {
  overflow: hidden;
  color: var(--45, #8c8c8c);
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  display: inline-block;
  position: absolute;
  right: 50px;
  top: 12px;
}
.ChatListLeftNav-Management {
  width: 230px;
  /*height: 900px; */
  height: auto;
  margin-top: 28px;
}
.ChatListLeftNav-Management-Title {
  overflow: hidden;
  color: var(--45, #8c8c8c);
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.ChatListLeftNav-Management-Nav {
  width: 220px;
  height: auto;
  margin-top: 4px;

  /*.ant-menu {
    background: #F6F8F7;
    overflow: hidden;
    color: #262626;
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  :deep(.ant-menu-item-selected) {
    background-color: #FFF;
    border-radius: 12px;
   
    color: #262626;
    //color:#29ca7f;
  }
  :deep(.ant-menu-item) {
    height: 62px;
  }*/
  :deep(.ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-description) {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    color: var(--45, #8C8C8C);
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  :deep(.ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title) {
    overflow: hidden;
    color: #262626;
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}
/*:deep(.list-item-hover:hover) {
  background-color: #FFF;
  border-radius: 12px; 
}

:deep(.list-item-hover a-list-item) {
  transition: background-color 0.3s; 
}*/

.list-item-link {
  display: block; /* 使链接填充整个列表项 */
  text-decoration: none; /* 移除下划线 */
}

.list-item-link:hover,
.list-item-link.active {
  background-color: #FFF; /* 鼠标悬浮或当前激活链接的背景色 */
  border-radius: 12px;
}

.ChatListContent-Confirm {
  margin-top: 24px;
  /*margin-left: 16px;*/
  
}
.ChatListContent-Confirm .ant-btn {
  border-radius: 12px;
  background: #262626;
  width: 220px;
  height: 40px;
}

.Agent-Wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 500px;
  margin-right: 20px;
  flex-shrink: 0;
}
</style>